<template>
    <div class="home-swipe">
        <van-search v-model="value" placeholder="请输入搜索关键词" 
            input-align="center" @search="onSearch" />
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in bannerData" :key="item.id">
                <!-- <img :src="item.picUrl" alt=""> -->
                <van-image :src="item.picUrl" lazy-load radius="1rem"/>
            </van-swipe-item>
            
        </van-swipe>
    </div>

</template>
<script>
import { Toast } from 'vant';

export default {
    data() {
      return {
        value: '',
        //存放api数据
        bannerData: []  
      };
  },
    created(){
      this.getBanner()
    } ,
  methods:{
    onSearch(val) {
      Toast(val);
    },
    getBanner(){
      this.$request('get','/recommend/banner')
        .then( response => {
        console.log(response);
        // let resData = response.data; 
        
          this.bannerData=response.data
        
        //  console.log(this.bannerData)
      })
        .catch(function (error){
          console.log(error);
      })
    }
  },
  
  mounted(){
    // this.getBanner()
  }
}

</script>
<style scoped>
</style>